Informative Bilder: Foto und Video
Letztes Update:
13. Dezember 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Bilder und Videos sollen kein visuelles Füllmaterial sein und nur in geringen Teilen zur ästhetischen Aufwertung dienen. Bilder und Videos müssen konkreten Nutzen bieten.
Stärken von Bildern und Videos liegen dort wo sie Informationen transportieren: Vorgänge abbilden, Produkte oder Orte zeigen.
Keine optimale Verwendung: um längere Textstrecken auflockern. Denn zu lange Texte haben meist mangelnde Aussagekraft und werden auch durch Bildeinsatz nicht besser. Texte kürzen, optimieren!
Illustrative Fotos machen Seiten verwechselbar und werden von Nutzern zum Großteil auch ignoriert
Vorteile
- direkte emotionale Ansprache der Nutzer (durch Abbildung von z.B. Produkten, Orten,…)
- Informationen unmissverständlich mitteilen
- ergänzen Informationen aus dem Text
- verstärken Informationen aus dem Text durch Wiedergabe mit einem anderen Medium
- erhöhen die Zugänglichkeit zur Information
- bleiben besser im Gedächtnis
- können Aufmerksamkeit lenken (z.B. Personenfotos die in eine Richtung blicken)
- verstärken die Glaubwürdigkeit sofern es sich um inhaltlich passende Bilder/Videos handelt und nicht um Stockbilder (rein dekorative Bilder können der Glaubwürdigkeit zum Teil sogar schaden)
Nachteile:
- Bilder ohne Aussage werden zumeist ignoriert
- schlecht gewählte, aussagelose Bilder zerstören den Gesamteindruck schneller – können auch zu weniger Glaubwürdigkeit führen. Beispielsweise werden Erträge von Geldanlagen niedriger eingestuft wenn Fotos von Personen dazu gezeigt werden – trotz höherer Verweildauer.
Wann kommt dieses Element zum Einsatz?
Nie aus rein ästhetischen Gründen einsetzen!!!
Nur verwenden wenn sie höchste Relevanz für den Inhalt/ die Aussage der Seite transportieren.
Tipp: falsche Fotos kann man erkennen indem man überlegt ob eine Botschaft für den Nutzer verloren geht wenn das Bild gelöscht wird.
UX Konzeption
Bilder und Videos
- müssen auf den Inhalt der Seite passen (keine Stockbilder)
- Bildstil der jeweiligen CI angepasst
- auf ein zentrales Motiv konzentriert
- zeigt wenige Details, ist leicht zu decodieren
- besser kein Bild / Video als ein nicht passendes
- Wenn Bilder oder Videos nicht die gesamte Spaltenbreite einnehmen dann rechtsbündig setzten (verbessert den Lesefluss)
- Text-Alternativen auf gleicher Webseite für die Inhalte der visuellen Informationen (Bild + Video)
Bilder
Ziel: Emotionale Verbindung aufbauen: Bilder wählen bei denen das Gesicht den Nutzer direkt anblickt
Ziel: direkte Aufmerksamkeit lenken: das Gesicht sieht auf den Inhalt der die Aufmerksamkeit erhalten soll. Niemals Gesichter aus der Seite hinausblicken lassen!!!
- kein Text direkt im Bild als Pixelgrafik!!!
- verpflichtend sind Bilder bei der Angabe von Kontaktpersonen oder Personen die eine Meinung aussprechen – z.B. zum eigenen Produkt. (macht die Empfehlung wirksamer)
- Beim Einsatz von Bildern mit Menschen müssen diese immer in Richtung des Seiten-Inhaltes blicken – niemals daraus hinaus. Inhalte in der Blickrichtung werden eher gelesen!
- beschreibende Alternativtexte verwenden
Videos
- Videos und sonstiger Sound dürfen nicht automatisch durch das Laden der Seite wiedergegeben werden.
- Inhalte von Videos müssen sich vollumfänglich auf der jeweiligen Seite auch in Textform wiederfinden. Alternative: Transkription anbieten
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
- Media Objekt: https://schema.org/MediaObject
- Image License: https://developers.google.com/search/docs/appearance/structured-data/image-license-metadata?hl=de
- Video: https://developers.google.com/search/docs/appearance/structured-data/video?hl=de
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
WCAG Prinzip Wahrnehmbar: Richtlinie 1.2.1.: Alternativen für zeitbasierte Medien wie Audio und Videoinhalte
WCAG Prinzip Wahrnehmbar: Richtlinie 1.1.1.: alle Nicht-Text-Inhalte brauchen Textalternativen
Richtlinie 1.1.1.: alle Nicht-Text-Inhalte brauchen Textalternativen
Weitere Infos zu barrierefreier Audio- und Video Gestaltung/Auszeichnung: https://www.w3.org/WAI/media/av/
WCAG Prinzip Wahrnehmbar: Richtlinie 1.4.5.: es muss Text statt Bilder eines Textes verwendet werden
Detaillierte Infos zu barrierefreien Bildern: https://www.w3.org/WAI/tutorials/images/
UX-Writing
Für Sprachausgaben und Suchmaschinen sind jeweils nur Dateinamen und Alternativtexte von Bildern und Videos ersichtlich. Deshalb muss sichergestellt werden, dass die Information von Bildern und Videos aus Dateinamen, Alternativtexten und den Texten der restlichen Webseite klar hervorgeht.
Beim Einsatz und Texten helfen folgende Fragestellungen:
- welchen Zweck hat das Bild/Video
- Welcher Inhalt ist zu sehen/hören?
- Geht auf der Webseite eine wichtige Information verloren wenn das Bild/Video nicht angezeigt wird?
Achtung! Keine Texte in (Pixel)-Grafiken unterbringen
Was ist zu texten
- Bild-Dateinamen
- Alt-Texte von Bildern
- Dokumente – Dateinamen
- Bild/Illustrationen-Untertitel
- bei Bildbühnen auch Beschriftung der Navigationselemente!!!
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
Alt-Texte – gilt nicht nur für Image- Bilder sondern auch für funktionale Bilder (Icons, Interaktionselemente…)
- klar, eindeutig, für Nutzer und Suchmaschinen lesbare Benennungen
- kurze Texte die den jeweiligen Inhalt beschreiben
- Worte sollen nicht mit minus oder Underline getrennt werden
- bei Fotos: Keywords sollen enthalten sein
- Maximal 100 Zeichen
- wird ein Bild (z.B. Icon) als Interaktionselement verwendet muss der Alt-Text die Funktion des Elementes vermitteln
Dateinamen
- klar, eindeutig, für Nutzer und Suchmaschinen lesbare Benennungen
- kurze Texte die den jeweiligen Inhalt beschreiben
- keine Leerzeichen
- keine Großbuchstaben
- keine Sonderzeichen
- Keywords sollen enthalten sein
Videos
- Videos ergänzen den Inhalt von Seiten – Alternativ muss der Text des Videos als Transkript vorhanden sein.
- Den Inhalt beschreibende Texte für Fälle in denen diese nicht angezeigt/wahrgenommen werden können